{layout name="public:layout" /}

<div class="form-content">
    <div class="layui-card data-container">
        <div class="layui-card-header"><i class="iconfont">&#xe755;</i> {$title}</div>
        <div class="layui-card-body">
            <table class="layui-hide" id="dataTable" lay-filter="dataTable"></table>

            {// 顶部工具栏}
            <script type="text/html" id="toolbar">
                <div class="dataToolbar">
                    <div class="layui-inline">
                        <input class="layui-input" name="keywords" id="keywords" value="{:input('keywords')}" autocomplete="on" placeholder="请输入角色名称">
                    </div>
                    <button class="layui-btn search-btn" data-type="reload"><i class="iconfont">&#xe679;</i> 查询</button>
                    {eq name="$Think.session.uid" value="1"}
                    <div class="layui-inline">
                        <a href="{:url('add')}" class="layui-btn larry-btn-dark"><i class="iconfont">&#xe692;</i> 添加角色</a>
                    </div>
                    {/eq}
                </div>
            </script>

            {// 行内工具栏}
            <script type="text/html" id="barTool">
                {eq name="$Think.session.uid" value="1"}
                <a href='{:url("access")}?id={{ d.id }}' class="layui-btn layui-btn-xs">角色授权</a>
                <a href='{:url("edit")}?id={{ d.id }}' class="layui-btn layui-btn-xs">编辑</a>
                <a href='javascript:;' onclick="del('{{d.id}}')"  class="layui-btn layui-btn-danger layui-btn-xs">删除</a>
                {/eq}
            </script>

            {// 状态}
            <script type="text/html" id="status">
                {eq name="$Think.session.uid" value="1"}
                {{# if(d.status == 1){ }}
                <button class="layui-btn layui-btn-xs" onclick="setStatus('{{d.id}}', '{{d.status}}')">启用</button>
                {{# } else { }}
                <button class="layui-btn layui-btn-xs layui-btn-danger" onclick="setStatus('{{d.id}}', '{{d.status}}')">关闭</button>
                {{# } }}
                {else/}
                {{# if(d.status == 1){ }}
                <button class="layui-btn layui-btn-xs">启用</button>
                {{# } else { }}
                <button class="layui-btn layui-btn-xs layui-btn-danger">禁用</button>
                {{# } }}
                {/eq}
            </script>

        </div>
    </div>
</div>

<script>
    //JavaScript代码区域
    layui.config({
        base: '/static/layui/lay/modules/'
    });
    layui.use(['element', 'jquery', 'layer', 'form', 'table'], function(){
        var element = layui.element,
            $ = layui.jquery,
            layer = layui.layer,
            form = layui.form,
            table = layui.table;

        table.render({
            elem : '#dataTable'
            ,url : '{:url("roleList")}'
            ,cellMinWidth: 80
            ,page: {
                prev: '上一页',
                next: '下一页',
                layout: ['prev', 'page', 'next', 'skip', 'count', 'limit']
            }
            // ,toolbar: 'default'  // 开启顶部工具栏（默认模板）
            ,toolbar: '#toolbar' // 指定顶部工具栏模板
            // ,even: true  // 隔行背景
            ,title: '用户角色表'  // 表格标题，用户导出数据文件名
            ,text: {  // 指定无数据或数据异常时的提示文本
                none: '暂无相关数据' //默认：无数据。注：该属性为 layui 2.2.5 开始新增
            }
            ,id: 'dataTable'
            ,cols: [[  // 表格列标题及数据
                {title: '#', type: 'numbers'}
                ,{checkbox: true}
                ,{field: 'id', width: 60, title: 'ID', sort: true, align: 'center'}
                ,{field: 'name', width: 200, title: '角色名称', align: 'center'}
                ,{field: 'pid', width: 80, title: '父ID', sort: true, align: 'center'}
                ,{field: 'status', width: 100, title: '状态', align: 'center', templet: '#status'}
                ,{field: 'remark', width: 200, title: '备注', sort: true, align: 'center'}
                ,{fixed: 'right', width: 200, title: '操作', align:'center', toolbar: '#barTool'}
            ]], done() {
                // 搜索功能
                var $ = layui.$, active = {
                    reload: function(){
                        var keywords = $('#keywords');

                        //执行重载
                        table.reload('dataTable', {
                            page: {
                                curr: 1 //重新从第 1 页开始
                            }
                            ,where: {
                                keywords: keywords.val()
                            }
                        }, 'data');
                    }
                };
                $('.search-btn').on('click', function(){
                    var type = $(this).data('type');
                    active[type] ? active[type].call(this) : '';
                });
            }
        });
    });
</script>
</div>